<template>
    <div class="app-container">
        <h5 class="titleInfo">
            基础信息
        </h5>
        <el-form class="form" ref="form"  :rules="rules" :model="form" label-width="100px">
            <el-form-item label="会员手机号" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="province">
                <el-cascader
                    :options="options"
                    v-model="selectedOptions"
                    @change="pcaList">
                </el-cascader>
            </el-form-item>
            <el-form-item label="账号类型" prop="isJrAccount">
                <el-select v-model="form.isJrAccount" placeholder="请选择账号类型">
                    <el-option
                        v-for="item in isJrAccountOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="金融名称">
                <el-input v-model="form.jrName"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <!-- <uploadImg  ref="uploadImg" :fileNum="fileNum"></uploadImg> -->
                <newUpload  ref="uploadImg" :width="-1" :height="-1" :fileNum="fileNum"></newUpload>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="btnDis" type="primary" @click="submitFn('form')" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import uploadImg from '@/components/UploadImg/index'
import newUpload from "@/components/imgUpload/index";
import { addVip } from '@/api/addVip'

// 手机号正则
const phoneReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入会员手机号"));
  } else {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('手机格式错误'))
    }
  }
}
// 密码正则
const passwordReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入密码"));
  } else {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('密码格式错误（6-16位字母和数字组合）'))
    }
  }
}

export default {
    name:"addVip",
    data() {
        return {
            btnDis:false,
            fileNum:1,
            form: {
                username: '',
                password:'', 
                nickName: '',
                province:'',
                city:'',
                area:'',
                headImage:"",
                isJrAccount:0,
                jrName:""
            },
            rules: {
                username: [
                    { required: true, validator: phoneReg, trigger: 'blur' },
                ],
                password: [
                    { required: true, validator: passwordReg, trigger: 'blur' },
                ],
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                province:[
                    { required: true, message: '请输入省市区', trigger: 'blur' },
                ],
                isJrAccount:[
                    { required: true, message: '请选择账号类型', trigger: 'blur' },
                ],
                jrName:[
                    { required: true, message: '请输入金融名称', trigger: 'blur' },
                ],
            },
            isJrAccountOption:[
                {
                    value: 0,
                    label: "普通账号"
                },
                {
                    value: 1,
                    label: "金融账号"
                }
            ],
            options: [],
            selectedOptions: []
        }
    },
    components:{uploadImg,newUpload},
    inject:["reload"],
    mounted(){
        // 省市区数据获取
        var addData = require('../../../../static/address/area.json')
        this.options = addData
    },
    methods:{
        // 省市区数据改变
        pcaList(value) {
            let e = this.selectedOptions
            e = value
            this.form.province = e[0]
            this.form.city = e[1]
            this.form.area = e[2]
        },
        //新增会员请求
        addVipFn(){
            let datas = this.form
            addVip(datas).then(res =>{
                this.btnDis = true
                // console.log(res)
                if(!res.data.code){
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push('/vipIndex')
                    this.reload()
                }else{
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'warning'
                    });
                    this.btnDis = false
                }
            })
            .catch(error=>{
                this.btnDis = false
            })
        },
        // 立即提交
        submitFn(e){
            this.$refs[e].validate((valid) => {
                if (valid) {
                    console.log(this.form.isJrAccount ==1)
                    if(this.form.isJrAccount ==1 && !this.form.jrName){
                         this.$message({
                        message: '金融名称必填项不能为空',
                        type: 'warning'
                    });
                    return
                    }
                        if(this.$refs.uploadImg.submitUpload()[0]){
                            this.form.headImage = this.$refs.uploadImg.submitUpload()[0]
                        }
                        console.log(this.form)
                        this.addVipFn()
                }else{
                    this.$message({
                        message: '必填项不能为空',
                        type: 'warning'
                    });
                }
            })    
        }
    }
}
</script>
<style scoped>
.app-container{padding: 0.1px!important}
.form{margin-left: 20px}
</style>
